<script setup lang="ts">
import { type ChannelItem } from '@/types'

defineProps<{
    channels: ChannelItem[],
    activeId: number
}>()
const emits = defineEmits<{
    "updateActiveId": [activeId: number]
}>()
</script>

<template>
    <div class="channel-nav">
        <nav class="list">
            <a v-for="item in channels" :key="item.id" class="item" href="javascript:;"
                :class="{ active: item.id === activeId }" @click="emits('updateActiveId', item.id)">
                {{ item.name }}
            </a>
        </nav>
    </div>
</template>